<template>
    <el-container>
        <el-main>
            <el-row style="margin-bottom: 30px">
                <el-col>
                    <el-date-picker v-model="tradeDate" type="date" placeholder="日期"></el-date-picker>
                    <el-button style="background: white" @click="selectABC()">历史卖出</el-button>
                </el-col>
                <el-col :span="24">
                    <el-table :data="historyTrade" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="stName" label="名称" width="80"></el-table-column>
                        <el-table-column prop="stCode" label="代码" width="120"></el-table-column>
                        <el-table-column prop="trUnit" label="单位" width="150"></el-table-column>
                        <el-table-column prop="ruName" label="规则名称" width="100"></el-table-column>

                        <el-table-column prop="trPrice" label="成交价" width="120"></el-table-column>
                        <el-table-column prop="stPrice" label="成本" width="120"></el-table-column>
                        <el-table-column prop="stQty" label="持仓" width="100"></el-table-column>
                        <el-table-column prop="trStep" label="阶段" width="150"></el-table-column>
                        <el-table-column prop="tiStart" label="买入" width="150"></el-table-column>
                        <el-table-column prop="tiEnd" label="卖出" width="150"></el-table-column>
                        <el-table-column prop="tiDay" label="天数" width="150"></el-table-column>
                        <el-table-column prop="trEarn" label="earn" width="150"></el-table-column>

                    </el-table>
                </el-col>
            </el-row>

            <el-row style="margin-bottom: 30px">
                <el-col>
                    <el-date-picker v-model="tradeDate" type="date" placeholder="日期"></el-date-picker>
                    <el-button style="background: white" @click="selectABC()">历史买入</el-button>
                </el-col>
                <el-col :span="24">
                    <el-table :data="create" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="stName" label="名称" width="80"></el-table-column>
                        <el-table-column prop="stCode" label="代码" width="120"></el-table-column>
                        <el-table-column prop="trUnit" label="单位" width="150"></el-table-column>
                        <el-table-column prop="ruName" label="规则名称" width="100"></el-table-column>
                        <el-table-column prop="trDate" label="日期" width="150"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-main>


    </el-container>

</template>

<script>
    export default {
        components: {},

        data() {
            return {
                create: [],
                historyTrade:
                    [
                        //     {
                        //     "id": 381,
                        //     "ruId": 14,
                        //     "trGroup": 9,
                        //     "trPlus": 20.74554,
                        //     "stName": "生物医药",
                        //     "stCode": "512290",
                        //     "trPrice": 1.234,
                        //     "stPrice": 1.234,
                        //     "stQty": 1600.0,
                        //     "trStep": 0,
                        //     "trUnit": 2000.0,
                        //     "trDate": "2022-12-07T10:23:18",
                        //     "mark": null,
                        //     "ruName": "第三版8"
                        // }
                    ],
                tradeDate: '',
            };
        },
        beforeMount() {
            this.list();
            this.listCreate();
            this.tradeDate = new Date();
        },
        mount() {
            // console.log(this.data().tradeDate)
        },
        watch: {},
        methods: {
            selectABC() {

            },
            //列表数据
            list() {
                this.$get("/history/list", {}).then((res) => {
                    this.historyTrade = res;
                });
            },
            //列表数据
            listCreate() {
                this.$get("/create/list", {}).then((res) => {
                    this.create = res;
                });
            },
            tableRowClassName(row) {
                if (row.row.trOperate > 0) {
                    return 'warning-row';
                } else if (row.row.trOperate < 0) {
                    return 'success-row';
                    // return '';
                }
                return '';
            },

        }
    };
</script>


<style>
    .el-table .warning-row {
        background: #f5f0b7;
    }

    .el-table .success-row {
        background: #57ff38;
    }
</style>

<style lang='scss' scoped>

    .grid-content {
        border-radius: 0px;
        min-height: 50px;
        font-size: 20px;
        font-family: 粗体;
    }

    .bg-purple-dark {
        background: rgba(255, 255, 255, 0.2);
    }

</style>

